<template>
	<view class="main animated fadeIn faster">
		<TitleBarVue :title="title"/>
		<view class="w-100 d-flex d-flex-wrap" style="margin-top: 200rpx;">
			<view class="d-flex mb-4 d-flex-column d-flex-middle d-flex-between w-25" v-for="(i,index) in rewordList" :key="i.id">
				<image v-if="i.rewardIcon" :src="i.rewardIcon" mode="widthFix" style="width: 80%;"></image>
				<image v-if="i.rewardType===6" class="mt-4" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/20250218141435.png" mode="widthFix" style="width: 70%;"></image>
				<image v-if="i.rewardType===7" class="mt-4" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/20250218150043.png" mode="widthFix" style="width: 70%;"></image>
				<view class="d-flex-column d-flex-center d-flex-middle">
					<view class="font22">{{i.rewardName}}</view>
					<view class="font22">×{{i.rewardCount}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TitleBarVue from '../../components/TitleBar.vue';
	import { FirstChangeApi } from '../../http/firstChange';
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				title: '我的奖品',
				rewordList: []
			}
		},
		components:{TitleBarVue},
		onLoad(opt) {
			this.viewPrizes(opt.activityId)
		},
		methods: {
			async viewPrizes(activityId) {
				let params = {
					activityId: activityId,
					type: 2,
					pageIndex: 1,
					pageSize: 50
				}
				let res = await FirstChangeApi.viewPrizes(params)
				
				res.records.forEach(record => {
				    let found = false;
				    for (let i=0; i<this.rewordList.length; i++) {
				        const reward = this.rewordList[i];
				        if (reward.rewardType === record.rewardType && reward.rewardResourceId === record.rewardResourceId) {
				            reward.rewardCount++;
				            found = true;
				            break;
				        }
				    }
				    if (!found) {
				        this.rewordList.push(record);
				    }
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	overflow: hidden;
	.w-25 {
		width: 25%;
	}
}
</style>
